﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta name="theme-color" content="#ffc91d" />
    <script src="~/Shouyeyangshi/js/jquery.min.js"></script>
    <link rel="icon" href="static/img/32.png" sizes="32x32" />
    <link rel="icon" href="static/img/192.png" sizes="192x192" />
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" />
    <link href="~/Login/static/kico.css" rel="stylesheet" />
    <link href="~/Login/static/paul.css" rel="stylesheet" />
    <script src="~/Shouyeyangshi/js/vue.min.js"></script>
    <script src="~/Shouyeyangshi/js/axios.min.js"></script>

    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

    <script src="~/Shouyeyangshi/js/antd.min.js"></script>
    <link href="~/Shouyeyangshi/css/antd.min.css" rel="stylesheet" />
    <link href="~/Shouyeyangshi/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Shouyeyangshi/js/bootstrap.min.js"></script>


    <style>
        .paging {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }

            .paging li {
                margin-right: 5px;
            }

                .paging li a {
                    display: block;
                    padding: 5px 10px;
                    border: 1px solid #ddd;
                    border-radius: 3px;
                    text-decoration: none;
                }

                .paging li.active a {
                    background-color: #337ab7;
                    color: #fff;
                }

                .paging li.disabled a {
                    color: #999;
                    cursor: not-allowed;
                }
    </style>
</head>
<body>
    <aside class="sidebar">
        <div class="avatar">

            <img src="~/Shouyeyangshi/images/@ViewBag.ProfileImage" />

        </div>
        <nav class="nav">
            <a href="#info">基本资料</a>
            <a href="#skills">我的路线订单</a>
            <a href="#story">我的酒店订单</a>
            <a href="/Home/Index">退出个人中心</a>
            <a href="/Home/Index">返回首页</a>
        </nav>
    </aside>
    <main>
        @*基本资料*@
        <section id="info">
            <div class="wrap">
                <h2 class="title">个人资料</h2>
                <div class="row">
                    <div class="col-l-4">
                        <p>姓名：@ViewBag.Username </p>
                        <p>性别：@ViewBag.Gender </p>
                        <p>年龄：20 </p>
                        <p>出生日期：@DateTime.Parse((ViewBag.Birthdate).ToString()).ToString("yyyy年MM月dd日")</p>
                    </div>
                    <div class="col-l-4">
                        <p>QQ：7869545136</p>
                        <p>手机号：<a href="https://github.com/Lovelinn">@ViewBag.Phone</a></p>
                        <p>地址：<a href="#">@ViewBag.Address</a></p>
                        <p>邮箱：<a href="#">@ViewBag.Email</a></p>
                    </div>
                    <div class="col-l-4">
                        <p>
                            <a type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" href="#">修改资料</a>
                        </p>
                        <br />
                        <br />
                        <br />
                        <p>
                            <a type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1" href="#">修改密码</a>
                        </p>
                    </div>
                    <div class="col-l-4">
                        <span style="color:red"></span>
                    </div>
                </div>
            </div>


            <!--修改资料 模态窗 -->
            <form action="/Home/XiuZiliao" method="post">
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel">修改资料</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="modal-body">
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label for="datePicker">修改姓名</label>
                                        <input type="text" class="form-control datepicker" id="datePicker" name="Username" required>
                                        <br />
                                        <label for="gender">请选择你的性别：</label>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="Gender" id="male" value="男">
                                            <label class="form-check-label" for="male">
                                                男
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="Gender" id="female" value="女">
                                            <label class="form-check-label" for="female">
                                                女
                                            </label>
                                        </div>
                                        <br />
                                        <label for="datePicker">修改电子邮箱</label>
                                        <input type="email" class="form-control datepicker" id="datePicker" name="Email" required>
                                        <br />
                                        <label for="datePicker">修改手机号</label>
                                        <input type="text" class="form-control datepicker" id="datePicker" name="Phone" required>
                                        <br />
                                        <label for="datePicker">修改地址</label>
                                        <input type="text" class="form-control datepicker" id="datePicker" name="Address" required>
                                        <br />
                                        <label for="datePicker">修改出生日期</label>
                                        <input type="date" class="form-control datepicker" id="datePicker" name="Birthdate" required>

                                        <br />
                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>




            <!--修改密码 模态窗 -->
            <form action="/Home/XiuPwd" method="post">
                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel">修改密码</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <!-- Modal body -->
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="datePicker">原密码</label>
                                    <input type="text" class="form-control datepicker" id="datePicker " name="Password" required>
                                    <br />

                                    <label for="datePicker">新密码</label>
                                    <input type="text" id="password" class="form-control datepicker" name="Password1" required>
                                    <br />
                                    <label for="datePicker">确认新密码</label>
                                    <input type="text" id="confirm-password" class="form-control datepicker" name="Password2" required>
                                    <br />
                                </div>

                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>



        </section>

        @*我的订单*@
        <section id="skills">
            <div class="wrap">
                <h2 class="title ">我的旅行路线订单</h2>
                <div class="row scrollable">
                    <!-- 添加分页组件和数据表格 -->


                    <div>
                        <div id="app">
                            <table class="text-center table-hover table" style="margin:auto;text-align:center">
                                <thead>
                                    <tr>
                                        <th>订单编号</th>
                                        <th>订单姓名</th>
                                        <th>订单名称</th>
                                        <th>订单价格</th>
                                        <th>订单地址</th>
                                        <th>订单天数</th>
                                        <th>订单图片</th>
                                        <th>订单日期</th>
                                        <th>操作类型</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(list, index) in columns.slice(startIndex, endIndex)" :key="list.OrderId">
                                        <td>{{list.OrderId}}</td>
                                        <td>{{list.UserName }}</td>
                                        <td>{{list.Name}}</td>
                                        <td>{{list.Price}}</td>
                                        <td>{{list.StartPoint}}</td>
                                        <td>{{list.Days}}</td>
                                        <td><img style="width:70px;height :50px;" v-bind:src="list.prc|picUrlForatter" /></td>
                                        <td>{{list.OrderDate}}</td>
                                        <td>
                                           
                                            <a class="btn btn-success" v-on:click="DelDingdan(list.OrderId)">取消订单</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <ul class="pagination">
                                <li :class="{disabled: currentPage === 1}">
                                    <a href="#" @@click="prevPage">上一页</a>
                                </li>
                                <li v-for="page in pages" :key="page" :class="{active: currentPage === page}">
                                    <a href="#" @@click="changePage(page)">{{page}}</a>
                                </li>
                                <li :class="{disabled: currentPage === totalPages}">
                                    <a href="#" @@click="nextPage">下一页</a>
                                </li>
                            </ul>
                            <br />

                        </div>
                        <script>

                            new Vue({
                                el: "#app",
                                data: {
                                    columns: [],
                                    tr: "tr",
                                    currentPage: 1,
                                    pageSize: 3
                                },
                                created: function () {
                                    this.sqlserver();
                                },
                                computed: {
                                    totalPages: function () {
                                        return Math.ceil(this.columns.length / this.pageSize);
                                    },
                                    startIndex: function () {
                                        return (this.currentPage - 1) * this.pageSize;
                                    },
                                    endIndex: function () {
                                        return this.currentPage * this.pageSize;
                                    },
                                    pages: function () {
                                        let pagesArray = [];
                                        for (let i = 1; i <= this.totalPages; i++) {
                                            pagesArray.push(i);
                                        }
                                        return pagesArray;
                                    }
                                },
                                filters: {
                                    picUrlForatter: function (value) {
                                        return "/Shouyeyangshi/images/" + value
                                    },
                                },
                                methods: {
                                    sqlserver: function () {
                                        axios.get("/Home/CxDingdan").then((response) => {
                                            this.columns = response.data;
                                        });
                                    },
                                    DelDingdan: function (id) {
                                    
                                        if (confirm('是否取消')) {
                                            this.columns.splice(this.columns.findIndex(function (item) {
                                                return item.RoomID === id;
                                            }), 1);
                                            axios.get("/Home/DelDingdan", { params: { id: id } }).then((response) => {
                                                if (response.data == "ok") {

                                                }
                                            });
                                        }
                                    },
                                    changePage: function (page) {
                                        this.currentPage = page;
                                    },
                                    prevPage: function () {
                                        if (this.currentPage > 1) {
                                            this.currentPage--;
                                        }
                                    },
                                    nextPage: function () {
                                        if (this.currentPage < this.totalPages) {
                                            this.currentPage++;
                                        }
                                    }
                                }
                            });
                        </script>


                  


                    </div>
                  



                </div>
            </div>
        </section>




        @*修改信息*@
        <section id="story">
            <div class="wrap">
                <h2 class="title">我的酒店订单</h2>
                <div class="text scrollable">

                    <div>

                        <div>
                            <ul class="timeline">
                                <li>
                                    <div id="app1">
                                        <table class="text-center table-hover table" style="margin:auto;text-align:center">
                                            <thead>
                                                <tr>
                                                    <th>酒店编号</th>
                                                    <th>酒店名称</th>
                                                    <th>酒店地址</th>
                                                    <th>入住时间</th>
                                                    <th>离店时间</th>
                                                    <th>酒店图片</th>
                                                    <th>入住总数</th>
                                                    <th>登记姓名</th>
                                                    <th>酒店床类型</th>
                                                    <th>酒店价格</th>
                                                    <th>操作类型</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(list, index) in columns.slice(startIndex, endIndex)" :key="list.RoomID">
                                                    <td>{{list.RoomID}}</td>
                                                    <td>{{list.HotelName}}</td>
                                                    <td>{{list.Address}}</td>
                                                    <td>{{list.Checkintime}}</td>
                                                    <td>{{list.Checkin}}</td>
                                                    <td><img style="width:70px;height :50px;" v-bind:src="list.HotelImage|picUrlForatter" /></td>

                                                    <td>{{list.NumOfBeds}}</td>
                                                    <td>{{list.UserName}}</td>
                                                    <td>{{list.TypeName}}</td>
                                                    <td>{{list.HotelPirce}}</td>
                                                    <td>
                                                        <a class="btn btn-success" v-on:click="DelDingdan(list.RoomID)">取消订单</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        @*分页*@
                                        <ul class="pagination">
                                            <li :class="{disabled: currentPage === 1}">
                                                <a href="#" @@click="prevPage">上一页</a>
                                            </li>
                                            <li v-for="page in pages" :key="page" :class="{active: currentPage === page}">
                                                <a href="#" @@click="changePage(page)">{{page}}</a>
                                            </li>
                                            <li :class="{disabled: currentPage === totalPages}">
                                                <a href="#" @@click="nextPage">下一页</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <script>

                                        new Vue({
                                            el: "#app1",
                                            data: {
                                                columns: [],
                                                tr: "tr1",
                                                currentPage: 1,
                                                pageSize: 3
                                            },
                                            created: function () {
                                                this.sqlserver();
                                            },
                                            computed: {
                                                totalPages: function () {
                                                    return Math.ceil(this.columns.length / this.pageSize);
                                                },
                                                startIndex: function () {
                                                    return (this.currentPage - 1) * this.pageSize;
                                                },
                                                endIndex: function () {
                                                    return this.currentPage * this.pageSize;
                                                },
                                                pages: function () {
                                                    let pagesArray = [];
                                                    for (let i = 1; i <= this.totalPages; i++) {
                                                        pagesArray.push(i);
                                                    }
                                                    return pagesArray;
                                                }
                                            },
                                            filters: {
                                                picUrlForatter: function (value) {
                                                    return "/Shouyeyangshi/images/" + value
                                                },
                                            },
                                            methods: {
                                                sqlserver: function () {
                                                    axios.get("/Home/JiuDingdan").then((response) => {
                                                        this.columns = response.data;
                                                    });
                                                },
                                                DelDingdan: function (id) {
                                                    if (confirm('是否取消')) {
                                                        this.columns.splice(this.columns.findIndex(function (item) {
                                                            return item.RoomID === id;
                                                        }), 1);
                                                        axios.get("/Home/DelJiuDingdan", { params: { id: id } }).then((response) => {
                                                            if (response.data == "ok") {

                                                            }
                                                        });
                                                    }
                                                },
                                                changePage: function (page) {
                                                    this.currentPage = page;
                                                },
                                                prevPage: function () {
                                                    if (this.currentPage > 1) {
                                                        this.currentPage--;
                                                    }
                                                },
                                                nextPage: function () {
                                                    if (this.currentPage < this.totalPages) {
                                                        this.currentPage++;
                                                    }
                                                }
                                            }
                                        });
                                    </script>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>

        </section>


        <footer>
            <p>底部2055704942qq.com</p>
        </footer>
    </main>
    <script src="~/Login/static/kico.js"></script>
    <script src="~/Login/static/paul.js"></script>

</body>
</html>